<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021-11-27
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <script src="${pageContext.request.contextPath}/jss/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/jss/carts.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/carts.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/reset.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .plus_i{
            border-left-color: transparent;
            right: 0;
        }
    </style>
</head>
<body>
<section class="cartMain">
    <div class="cartMain_hd">
        <ul class="order_lists cartTop">
            <%--            <li class="list_chk">--%>
            <%--                <!--所有商品全选-->--%>
            <%--                <input type="checkbox" id="all" class="whole_check">--%>
            <%--                <label for="all"></label>--%>
            <%--                全选--%>
            <%--            </li>--%>

            <li class="list_con">商品详情：details</li>
            <li class="list_info">商品参数</li>
            <li class="list_price">单价</li>
            <li class="list_amount">数量</li>
            <li class="list_sum">金额</li>
            <li class="list_op">操作</li>

        </ul>
    </div>

    <div class="cartBox">
        <div class="shop_info">
            <%--            <div class="all_check">--%>
            <%--                <!--店铺全选-->--%>
            <%--                <input type="checkbox" id="shop_a" class="shopChoice">--%>
            <%--                <label for="shop_a" class="shop"></label>--%>
            <%--            </div>--%>
            <div class="shop_name">
                店铺：<a href="javascript:;">荒岛书店</a>
            </div>
        </div>
        <c:forEach var="product" items="${cart.cartItems}">
        <div class="order_content">
            <ul class="order_lists">
                <li class="list_chk">
                    <input value="${product.getPid()}" type="checkbox" id="checkbox${product.getPid()}" class="son_check" ${product.isChecked()?'checked':''}>
                    <label for="checkbox${product.getPid()}" class="${product.isChecked()?'mark':''}"></label>
                </li>
                <li class="list_con">
                    <div class="list_img"><a href="javascript:;"><img src="/images/${product.getPhoto()}" alt=""></a></div>
                    <div class="list_text"><a href="javascript:;">${product.getDetail()}</a></div>
                </li>
                <li class="list_info">
                    <p>书名：${product.getPname()}</p>
                    <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                    <p class="price">${product.getPrice()}</p>
                </li>
                    <%--                <li class="list_amount">--%>
                    <%--                    <div class="amount_box">--%>
                    <%--                        <a href="javascript:;" class="reduce reSty">-</a>--%>
                    <%--                        <input type="text" value="${product.count}" class="sum" id="sum_${product.pid}">--%>
                    <%--                        <a href="javascript:;" class="plus">+</a>--%>
                    <%--                    </div>--%>
                    <%--                </li>--%>
                <%--<li class="list_amount">--%>
                    <%--<div class="amount_box">--%>
                        <%--<a href="/car/changeCartItemNum?pid=${product.pid}&num=${product.count-1}" class="reduce reSty" >-</a>--%>
                        <%--<input type="text" value="${product.count}" class="sum">--%>
                        <%--<a href="/car/changeCartItemNum?pid=${product.pid}&num=${product.count+1}" class="plus">+</a>--%>
                    <%--</div>--%>
                <%--</li>--%>
                <li class="list_amount">
                    <div class="amount_box">
                        <a href="/car/changeCartItemNum?pid=${product.pid}&num=${product.count-1}">-</a>
                        <input type="text" value="${product.count}" class="sum">
                        <a href="/car/changeCartItemNum?pid=${product.pid}&num=${product.count+1}" class="plus_i">+</a>
                    </div>
                </li>
                <li class="list_sum">
                    <p class="sum_price" id="sum_price_${product.pid}">${product.price * product.count}</p>
                </li>
                <li class="list_op">
                    <p class="del"><a href="/car/deleteCartItem?pid=${product.pid}" class="delBtn">移除商品</a></p>
                </li>
            </ul>
            </c:forEach>





            <!--底部-->
            <div class="btn" align="left"><a href="../jsp/index_article.jsp">返回商品界面</a></div>
            <div class="bar-wrapper">
                <div class="bar-right">
                    <div class="piece">已选商品<strong class="piece_num">${cart.getTotalCount()}</strong>件</div>
                    <div class="totalMoney">共计: <strong class="total_text">${cart.getTotalPrice()}</strong></div>
                    <div class="calBtn"><a href="/order/toOrder" class="${cart.getTotalCount()!=0?'btn_sty':''}">结算</a></div>
                </div>
            </div>
</section>
<%--<section class="model_bg"></section>--%>
<%--<section class="my_model">--%>
<%--    <p class="title">删除宝贝<span class="closeModel">X</span></p>--%>
<%--    <p>您确认要删除该宝贝吗？</p>--%>
<%--    <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div>--%>
<%--</section>--%>

<script src="../jss/jquery.min.js"></script>
<script src="../jss/carts.js"></script>
<script>


    $("#changeCartItemNum").click(function () {
        let pid =parseInt($("#pid").attr('value'))
        let num = parseInt($("#text_box").attr('value'))+1
        location.href = "http://localhost:8888/car/changeCartItemNum?pid="+pid+"&num="+num
        return false
    })
    //点击勾选框时，发送请求更新缓存中对应购物项勾选信息
    $('input[type="checkbox"]').click(function () {
        if ($(this).is(':checked')) {
            $(this).next('label').addClass('mark');
        } else {
            $(this).next('label').removeClass('mark')
        }
        var pid = $(this).attr("value")
        location.href = "http://localhost:8888/car/changeChecked?pid="+pid
    });

</script>
</body>
</html>
